<template>
    <div>
        <el-dialog :visible.sync="orderDialogVisible" title="填写订单">

            <el-form :model="bookInformation" :rules="rules" label-width="100px" style="width: 500px; margin-left: 75px" size="small " ref="flightForm" >
                <h3>航班信息</h3>
                <el-form-item label="行程" prop="fliNo">
                    <el-input v-model="rowInfo.fliBaddress" style="width:168px" disabled/>————
                    <el-input v-model="rowInfo.fliAaddress" style="width:168px" disabled/>
                </el-form-item>

                <el-form-item label="航空公司" prop="comCode">
                    <el-input v-model="rowInfo.comCode" style="float: left;width: 400px" disabled/>
                </el-form-item>


                <el-form-item label="起降时间" prop="fliBtime">
                    <el-input v-model="rowInfo.fliBtime" style="width: 168px" disabled/>————
                    <el-input v-model="rowInfo.fliAtime" style="width: 168px" disabled/>
                </el-form-item>

                <el-form-item label="经济舱价格" prop="fliYfare">
                    <el-input v-model="rowInfo.fliYfare" style="float:left;width: 80px" disabled/>
                </el-form-item>


                <h3>填写个人信息</h3>
                <el-form-item label="姓名" prop="cusAccount">
                    <el-input v-model="bookInformation.cusAccount" style="float: left;width: 400px"/>
                </el-form-item>
                <el-form-item label="手机" prop="cusTelNumber">
                    <el-input v-model="bookInformation.cusTelNumber" style="float: left;width: 400px"/>
                </el-form-item>
                <el-form-item label="身份证号码" prop="cusId">
                    <el-input v-model="bookInformation.cusId" style="float: left;width: 400px"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit" :disabled="btnSts">提交订单</el-button>
                    <el-button @click="orderDialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <el-dialog :visible.sync="paymentDialogVisible" title="订单信息">
            <el-form :model="rowInfo"  label-width="100px" style="width: 500px; margin-left: 75px" size="small " ref="flightForm" >
                <el-form-item label="行程">
                    <el-input v-model="rowInfo.fliBaddress" style="width:168px" disabled/>————
                    <el-input v-model="rowInfo.fliAaddress" style="width:168px" disabled/>
                </el-form-item>

                <el-form-item label="起降时间">
                    <el-input v-model="rowInfo.fliBtime" style="width: 168px" disabled/>————
                    <el-input v-model="rowInfo.fliAtime" style="width: 168px" disabled/>
                </el-form-item>

                <el-form-item label="航空公司" prop="comCode">
                    <el-input v-model="rowInfo.comCode" style="float: left;width: 400px" disabled/>
                </el-form-item>




                <h3>乘机人信息</h3>
                <el-form-item label="姓名">
                    <el-input v-model="bookInformation.cusAccount" style="float: left;width: 400px" disabled/>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="bookInformation.cusTelNumber" style="float: left;width: 400px" disabled/>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="bookInformation.cusId" style="float: left;width: 400px" disabled/>
                </el-form-item>
                <el-form-item label="舱位">
                    <el-input v-model="bookInformation.booBerth" style="float:left;width: 80px" disabled/>
                </el-form-item>
                <el-form-item label="票价">
                    <el-input v-model="rowInfo.fliYfare" style="float:left;width: 80px" disabled/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="prestep">上一步</el-button>
                    <el-button type="primary" @click="registry" :disabled="btnSts">支付</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <div style="text-align: center ;margin-bottom: 30px ">
            出发城市：
            <el-input v-model="flight.fliBaddress" placeholder="出发城市" style="margin-top: 50px"></el-input>
            到达城市：
            <el-input v-model="flight.fliAaddress" placeholder="到达城市" style="margin-top: 50px"></el-input>
            出发时间：
            <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="flight.fliBtime"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00"
            >
            </el-date-picker>

            <el-button type="primary" icon="el-icon-search" style="margin: 20px" @click="findList">搜索</el-button>
        </div>






        <el-table :data="flightInformationList" width="100%">
            <el-table-column prop="comCode" label="航班信息" align="right"></el-table-column>
            <el-table-column prop="cusName" label=""></el-table-column>
            <el-table-column prop="fliBaddress" label="起始地"></el-table-column>
            <el-table-column prop="fliAaddress" label="目的地"></el-table-column>
            <el-table-column prop="fliBtime" label="起飞时间" ></el-table-column>
            <el-table-column prop="fliAtime" label="到达时间"></el-table-column>
            <el-table-column prop="fliYfare" label="最低报价" align="center"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="booking(scope.$index,scope.row)" >订票</el-button>
                </template>
            </el-table-column>
        </el-table>



        <el-pagination
                style="margin-top: 10px"
                background
                layout="prev, pager, next"
                :current-page.sync="pageInfo.pageNum"
                :page-count="pageInfo.pages"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="this.findList"
        >
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "FlightInformationList",
        created() {
            this.findList();
            this.cusAccount = this.$route.query.cusAccount;
        },
        methods: {
            random(min,max){
                return Math.floor(Math.random() * (max - min)) + min;
            },
            /**
             * 获取表格内数据条件查询
             */
            findList() {
                axios.post("/flightinformation/page", {
                    pageNum:this.pageInfo.pageNum,
                    pageSize:this.pageInfo.pageSize,
                    condition:this.flight,

                }).then(resp => {
                    //console.log(resp.data);
                    this.pageInfo.pageSize=resp.data.pageSize;
                    this.pageInfo.pageNum=resp.data.pageNum;
                    this.pageInfo.total=resp.data.total;
                    this.pageInfo.pages=resp.data.pages;
                    //将数据赋值给managerList表格数据
                    this.flightInformationList=resp.data.list;
                })
            },
            payment() {
                this.$confirm('确定并支付, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送请求去删除对应的数据
                    axios.delete('/bookInformation/payment/'+this.rowInfo.fliNo).then(resp=>{
                        if (resp.data==='success'){
                            this.$message({
                                type:'success',
                                message:'支付成功!'
                            })
                        }else {
                            this.$message({
                                type:'error',
                                message:'支付失败!'
                            })
                        }
                        //重新获取表格数据
                        this.findList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消支付'
                    });
                });

            },
            cancel(){
                this.bookInformation.flagPay=0;
                axios.post("/bookInformation/save", this.bookInformation).then(response=> {
                    if(response.data==='success'){
                        this.$message({
                            type: 'info',
                            message: '已取消支付,订单已保存'
                        });
                    }else {
                        this.$message({
                            type: 'error',
                            message: '订单未保存!'
                        })
                    }
                })
                paymentDialogVisible=false;
            },
            booking(index, row) {

                if(this.cusAccount!='') {
                    this.rowInfo = row;
                    this.orderDialogVisible = true;
                }else{
                    this.$message({
                        title:'提示',
                        message:"未登录",
                        type:'warning'
                    })

                }
            },
            update() {
                //将提交按钮设置为不可用状态 按钮动态加disable属性
                this.btnSts = true;
                //1、先验证表单格式没问题了，再允许发送请求
                this.$refs['flightForm'].validate((valid) => {
                    if (valid) {
                        let  payLoad=this.flight;
                        // 进行表单的提交
                        axios.post("/flight/save", payLoad).then(response => {
                            this.btnSts = false;
                            if (response.data === 'success') {
                                this.$notify({
                                    title: "提示",
                                    message: "用户保存成功",
                                    type: "success"
                                });
                                //一旦提交成功，自动关闭窗口
                                this.orderDialogVisible = false;
                                //刷新表格数据
                                this.findList();
                            }
                        })
                    } else {
                        this.btnSts = false;
                        return false;
                    }
                })
            },
            /**
             * 退票
             */
            refundticket(index, row){
                this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/bookInformation/delete/"+row.id).then(resp=>{
                        if(resp.data==="success") {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.findList();

                        }else{
                            this.$message({
                                type: 'error',
                                message: 'this.findList();删除失败!'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                this.ticketDialogVisible=false;
            },
            /**
             * 查询票
             */
            ticket(){

                axios.post("/bookInformation/Ticketpage", {
                    pageNum:this.pageInfo.pageNum,
                    pageSize:this.pageInfo.pageSize,
                    condition:this.customer,

                }).then(resp => {
                    console.log(resp.data);
                    this.pageInfo.pageSize=resp.data.pageSize;
                    this.pageInfo.pageNum=resp.data.pageNum;
                    this.pageInfo.total=resp.data.total;
                    this.pageInfo.pages=resp.data.pages;
                    //将数据赋值给managerList表格数据
                    this.bookInformationList=resp.data.list;
                    this.ticketDialogVisible=true;
                })
            },
            submit(){
                var date1=new Date();
                var time=date1.getFullYear()+""+date1.getMonth()+""+date1.getDate()+""+date1.getDay()+""+date1.getHours()+""+date1.getMinutes()+""+date1.getSeconds()
                //将提交按钮设置为不可用状态
                this.btnSts=true;
                //1.先验证表单没问题了在发送
                let form=this.$refs['flightForm'];
                this.bookInformation.comCode=this.rowInfo.comCode;
                this.bookInformation.booNo=this.rowInfo.fliNo;
                this.bookInformation.boobAddress=this.rowInfo.fliBaddress;
                this.bookInformation.booAAddress=this.rowInfo.fliAaddress;
                this.bookInformation.booAtime=this.rowInfo.fliAtime+'';
                this.bookInformation.boobTime=this.rowInfo.fliBtime+'';
                this.bookInformation.booBerth='经济舱';
                this.bookInformation.booOrderNum=this.customer.cusAccount+''+time,
                    this.bookInformation.booFare=this.rowInfo.fliYfare;
                this.bookInformation.flag=0;
                form.validate((valid)=> {
                    if (valid) {
                        this.btnSts=false;
                        this.orderDialogVisible=false;
                        this.paymentDialogVisible=true;

                    }else{
                        this.btnSts=false;
                        return false;
                    }
                })
            },
            registry(){

                this.$confirm('确定并支付, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.bookInformation.flagPay=1;
                    this.bookInformation.booNumber = this.random(1,60);
                    axios.post("/bookInformation/save", this.bookInformation).then(response=>{

                        if(response.data==='success'){
                            this.$message({
                                title:'提示',
                                message:"支付成功",
                                type:'success'
                            })
                        }else {
                            this.$message({
                                type: 'error',
                                message: '支付失败!'
                            })
                        }
                        this.clear();
                        this.paymentDialogVisible=false;
                    })
                });

            },
            /**
             * 上一步
             */
            prestep(){
                this.orderDialogVisible=true;
                this.paymentDialogVisible=false;
            },

            clear(){
                this.bookInformation={
                    cusAccount:"",
                    comCode: "",
                    cusId: "",
                    cusTelNumber:"",
                    booNo: "",
                    boobAddress: "",
                    booAAddress: "",
                    boobTime: "",
                    booAtime: "",
                    booBerth: "",
                    booNumber: "",
                    booFare: "",
                    booTime: "",
                    flagPay: 0,
                    flag: 0,
                };

            },

        },
        data() {
            let validPhone = (rules, value, callback) => {
                if (!value || value === '') {
                    return callback(new Error("手机号不能为空！"))
                }
                let pattern = /^1[3|4|5|8][0-9]\d{8}$/;
                if (!pattern.test(value)) {
                    return callback(new Error("手机号格式错误！请重新输入"));
                }
                return callback();
            };

            //通过正则表达式验证身份证
            let validId = (rules, value, callback) => {
                if (!value || value === '') {
                    return callback(new Error("身份证不能为空"))
                }
                let pattern = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
                if (!pattern.test(value)) {
                    return callback(new Error("身份证格式错误！请重新输入！"))
                }
                return callback();
            };

            let validAccount = (rule, value, callback) =>{
                //判断姓名长度大于2，不能为空
                if (!value || value === '') {
                    return callback(new Error("姓名不能为空"));
                }
                if ( value.length < 2) {
                    return callback(new Error("姓名长度不能小于2"));
                }
                return callback();
            };


            return {
                //pageInfo对象实际是从后台查询得到的，代表了分页必要的信息
                pageInfo:{
                    pageNum:1, /*当前是那一页*/
                    pageSize:5, /*每页展示多少条*/
                    pages:1, /*总共有多少页*/
                    total:100 /*总共有多少条数据*/
                },
                drawer:false,
                ticketDialogVisible:false,
                orderDialogVisible: false,
                paymentDialogVisible:false,
                refundVisible:false,
                loginVisible:true,
                onlineVisible:false,
                bookInformation:{
                    cusAccount: "",
                    comCode: "",
                    cusId: "",
                    cusTelNumber:"",
                    booNo: "",
                    boobAddress: "",
                    booAAddress: "",
                    boobTime: "",
                    booAtime: "",
                    booBerth: "",
                    booNumber: 0,
                    booOrderNum:"",
                    booFare: "",
                    booTime: "",
                    flagPay: 0,
                    flag: 0,
                },
                flight: {
                    fliNo: "",          //航班编号
                    airCode: "",        //飞机编号
                    comCode: "",        //公司编号
                    fliBaddress: '',    //起始地址
                    fliAaddress: '',     //到达地址
                    fliBtime: '',        //起飞时间
                    fliAtime: '',        //到达时间
                    fliFfare: '',       //头等舱价格
                    fliCfare: '',       //公务舱价格
                    fliYfare: '',       //经济舱价格
                    fliFnumber: '',     //头等舱剩余人数
                    fliCnumber: '',     //公务舱剩余人数
                    fliYnumber: '',     //经济舱剩余人数
                    flag: 0,
                    fliDiscount: 0,     //折扣
                    fliRefundtime: 0,  //退票记录时间
                },
                customer:{
                    cusAccount:"",
                    cusPwd:"",
                    cusId:"",
                    cusSex:"",
                    cusTelNumber:"",
                    cusEmail:"",
                    cusTime:"",
                    cusIntegral:"",
                    farId:"",
                    cusName:"",
                    cusType:"",
                    flag:""
                },
                bookInformationList:[],
                rowInfo:{
                    fliNo: "",          //航班编号
                    airCode: "",        //飞机编号
                    comCode: "",        //公司编号
                    fliBaddress: '',    //起始地址
                    fliAaddress: '',     //到达地址
                    fliBtime: '',        //起飞时间
                    fliAtime: '',        //到达时间
                    fliFfare: '',       //头等舱价格
                    fliCfare: '',       //公务舱价格
                    fliYfare: '',       //经济舱价格
                    fliFnumber: '',     //头等舱剩余人数
                    fliCnumber: '',     //公务舱剩余人数
                    fliYnumber: '',     //经济舱剩余人数
                    flag: 0,
                    fliDiscount: 0,     //折扣
                    fliRefundtime: 0,  //退票记录时间
                },
                paybtnSts:true,
                btnSts: false,
                flightInformationList: [],
                rules: {
                    cusAccount:[
                        {validator: validAccount, trigger: 'blur'}
                    ],
                    cusTelNumber:[
                        {validator: validPhone, trigger: "blur"}
                    ],
                    cusId:[
                        {validator: validId, trigger: "blur"}
                    ]
                },
            }
        }
    }
</script>


<style scoped>
    .el-input{
        width: 200px
    }
</style>